<template>
    <div class="page coach-page teenagers-datail">
        <div class="content">
            <div class="training-detail-crumb">
                <a class="back-btn" href="javascript:history.back()">返回</a>
                <a>{{total}}</a><span style="font-size: 14px;">个回帖，共{{pages}}页</span>
            </div>
            <div class="teenager-lists">
                <div class="particulars-title">{{body.title}}</div>
                <div class="teenager-item display-flex-row bottom-line">
                    <div class="personage">
                        <img src="/images/louzhu.png" class="personage-img"/>
                        <div class="Head-portrait"><img :src="body.pic|filtersImg"/></div>
                        <div class="personage-name">{{body.name}}</div>
                    </div>
                    <div class="flex1 memo-wrap">
                        <div class="desf">
                            <div class="videos" style="width:500px;" v-if="body.video!=''">
                                <video
                                        style="width:500px;"
                                        :src="body.video|filtersImg"
                                        controls>
                                </video>
                            </div>
                        </div>
                        <div class="particulars-con" v-html="body.content">

                        </div>
                        <comments :name="body.name" @referrer="referrer" class="pbt2" :releaseUserId="body.userId"
                                  type="0"
                                  :forumId="body.id" level="1"
                                  :date="body.updateTime|filtertime"></comments>
                    </div>

                </div>
                <div class="teenager-item display-flex-row bottom-line" v-for="(item,index) in list" :key="index">
                    <div class="personage">
                        <img v-if="body.userId==item.userId" src="/images/louzhu.png" class="personage-img"/>
                        <div class="Head-portrait"><img :src="item.pic|filtersImg"/></div>
                        <div class="personage-name">{{item.name}}</div>
                    </div>
                    <div class="flex1 memo-wrap">
                        <div class="particulars-con" v-html="item.content">
                        </div>
                        <div class="reply display-flex-row justify-content-right" v-if="item.list.length>0">
                            <div class="reply-con">
                                <div class="reply-item" v-for="(item2,index2) in item.list"
                                     :key="index2">
                                    <div class="reply-user display-flex-row">
                                        <div class="image"><img :src="item2.pic|filtersImg" alt=""></div>
                                        <div class="reply-user-memo">
                                            <span>{{item2.name}}：</span>{{item2.content}}
                                        </div>

                                    </div>
                                    <div class="reply-time"> {{item2.createTime|filtertime}}</div>
                                    <!--                                    <comments @referrer="referrer" class="pbt2" :releaseUserId="item2.userId"-->
                                    <!--                                              type="1"-->
                                    <!--                                              :forumId="item2.id"-->
                                    <!--                                              :level="item2.leve"-->
                                    <!--                                              :name="item2.name"-->
                                    <!--                                              :date="item2.createTime|filtertime"></comments>-->

                                    <!--                                    <div class="reply-item">-->
                                    <!--                                        <div class="reply-user display-flex-row">-->
                                    <!--                                            <div class="image"><img src="/images/Head-portrait.jpg" alt=""></div>-->
                                    <!--                                            <div class="reply-user-memo">-->
                                    <!--                                                <span>薛之谦：</span>在最后一轮比赛中皇马主场0-2不敌皇家贝蒂斯，创下了一系列耻辱且尴尬的纪录-->
                                    <!--                                            </div>-->
                                    <!--                                        </div>-->
                                    <!--                                    </div>-->
                                </div>
                            </div>
                        </div>
                        <comments @referrer="referrer" class="pbt2" :releaseUserId="item.userId" type="1"
                                  :forumId="item.id"
                                  :level="item.leve"
                                  :name="item.name"
                                  :date="item.createTime|filtertime"></comments>
                    </div>
                </div>
                <el-pagination
                        background
                        class="pageforum"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {get, getAssessList} from '../../api/api/forum.js';
    import {baseImgPath, basefile} from '@/config/env.js';
    import comments from '../../components/comments'

    function formatDate(timeStamp, type = 'Y-M-D H:I:S', auto = false) {
        let time = (timeStamp + '').length === 10 ? new Date(parseInt(timeStamp) * 1000) : new Date(parseInt(timeStamp));
        let _year = time.getFullYear();
        let _month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        let _date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let _hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let _minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let _secconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        let formatTime = '';
        let distinctTime = new Date().getTime() - time.getTime();

        if (auto) {
            if (distinctTime <= (1 * 60 * 1000)) {
                // console.log('一分钟以内，以秒数计算');
                let _s = Math.floor((distinctTime / 1000) % 60);
                formatTime = _s + '秒前';
            } else if (distinctTime <= (1 * 3600 * 1000)) {
                // console.log('一小时以内,以分钟计算');
                let _m = Math.floor((distinctTime / (60 * 1000)) % 60);
                formatTime = _m + '分钟前';
            } else if (distinctTime <= (24 * 3600 * 1000)) {
                // console.log('一天以内，以小时计算');
                let _h = Math.floor((distinctTime / (60 * 60 * 1000)) % 24);
                formatTime = _h + '小时前';
            } else if (distinctTime <= (30 * 24 * 3600 * 1000)) {
                let _d = Math.floor((distinctTime / (24 * 60 * 60 * 1000)) % 30);
                formatTime = _d + '天前';
                // console.log('30天以内,以天数计算');
            } else {
                // 30天以外只显示年月日
                formatTime = _year + '-' + _month + '-' + _date;
            }
        } else {

            switch (type) {
                case 'Y-M-D H:I:S':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I:S zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日  ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes;
                    break;
                case 'Y-M-D H':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours;
                    break;
                case 'Y-M-D':
                    formatTime = _year + '-' + _month + '-' + _date;
                    break;
                case 'Y-M-D zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日';
                    break;
                case 'Y-M':
                    formatTime = _year + '-' + _month;
                    break;
                case 'Y':
                    formatTime = _year;
                    break;
                case 'M':
                    formatTime = _month;
                    break;
                case 'D':
                    formatTime = _date;
                    break;
                case 'H':
                    formatTime = _hours;
                    break;
                case 'I':
                    formatTime = _minutes;
                    break;
                case 'S':
                    formatTime = _secconds;
                    break;
                default:
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
            }
        }
        // 返回格式化的日期字符串
        return formatTime;
    }

    export default {
        data() {
            return {
                id: this.$route.query.id ? this.$route.query.id : 0,
                data: {
                    id: this.$route.query.id ? this.$route.query.id : 0,
                },
                body: {
                    content: "",
                    createTime: '',
                    id: 0,
                    name: null,
                    pic: null,
                    status: 0,
                    sum: 0,
                    title: "",
                    updateTime: 0,
                    userId: 0,
                    video: "",
                },
                pageSize: 10,
                total: 0,
                pageNum: 1,
                pages: 0,
                yess: true,
                list: []
            }
        },
        components: {
            comments,
        },
        mounted() {
            var that = this;
            this.getDetail()
            this.getlist()
        },
        methods: {
            handleCurrentChange(val) {
                this.pageNum = val
                this.getlist()
            },
            submitForm(formName) {
                var that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (that.id == 0) {
                            that.addTrains()
                        } else {
                            that.editTrains()
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addTrains() {
                var that = this;
                forumadd(this.addTrain).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.$message({
                            message: '新增成功',
                            type: 'success'
                        });
                        this.golist()
                    }
                });
            },
            editTrains() {
                var that = this;
                informationeditOne(this.addTrain).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.$message({
                            message: '编辑成功',
                            type: 'success'
                        });
                        that.golist()
                    }
                });
            },
            getDetail() {
                var that = this;
                get(this.data).then(res => {
                    if (res.code == 200) {
                        that.body = res.data
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                console.log(res);
                console.log(file);
                this.addTrain.showImg = res.data.path
            },
            getlist() {
                var that = this;
                getAssessList({
                    id: that.id,
                    pageSize: that.pageSize,
                    pageNum: that.pageNum
                }).then(res => {
                    if (res.code == 200) {
                        that.list = res.data.list
                        that.total = res.data.total
                        that.pages = res.data.pages
                    }
                });
            },
            referrer(e) {
                this.getlist()
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },

            filtertime: function (data) {
                if (data) {
                    return formatDate(data, 'Y-M-D H:I:S')
                }
                return ''
            }
        },
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");

    .cur {
        cursor: pointer;
    }

    .pageforum {
        text-align: right;
        margin-top: 20px;
    }

    .teenagers-datail .memo-wrap {
        position: relative;
        min-height: 150px;
    }

    .teenagers-datail .particulars-time {
        margin-top: 20px;
        text-align: right;
        position: absolute;
        bottom: 10px;
        right: 20px;
    }

    .teenagers-datail .personage {
        padding-bottom: 20px;
    }

    .pbt2 {
        /*position: absolute;*/
        /*right: 20px;*/
        /*bottom: 20px;*/
        /*width: 80%;*/
    }

    .particulars-con {
        min-height: 150px;
    }

    .desf {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
    }
</style>
